{% extends "base.html" %}

{% block title %}{% if activity %}Edit Activity{% else %}Create Activity{% endif %} - Volunteer Platform{% endblock %}

{% block content %}
<div class="activity-form-container">
    <div class="form-header">
        <h1>{% if activity %}Edit Activity{% else %}Create New Activity{% endif %}</h1>
    </div>

    <form class="activity-form" method="POST" enctype="multipart/form-data">
        <div class="form-section">
            <h2>Basic Information</h2>
            <div class="form-group">
                <label for="title">Activity Title</label>
                <input type="text" id="title" name="title" value="{{ activity.title if activity else '' }}" required>
            </div>

            <div class="form-group">
                <label for="description">Activity Description</label>
                <textarea id="description" name="description" rows="6" required>{{ activity.description if activity else '' }}</textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="start_time">Start Time</label>
                    <input type="datetime-local" id="start_time" name="start_time" 
                           value="{{ activity.start_time.strftime('%Y-%m-%dT%H:%M') if activity else '' }}" required>
                </div>

                <div class="form-group">
                    <label for="end_time">End Time</label>
                    <input type="datetime-local" id="end_time" name="end_time" 
                           value="{{ activity.end_time.strftime('%Y-%m-%dT%H:%M') if activity else '' }}" required>
                </div>
            </div>

            <div class="form-group">
                <label for="location">Location</label>
                <input type="text" id="location" name="location" value="{{ activity.location if activity else '' }}" required>
            </div>

            <div class="form-group">
                <label for="max_participants">Maximum Participants</label>
                <input type="number" id="max_participants" name="max_participants" min="1" 
                       value="{{ activity.max_participants if activity else '' }}" required>
            </div>
        </div>

        <div class="form-section">
            <h2>Detailed Requirements</h2>
            <div class="form-group">
                <label for="required_skills">Required Skills</label>
                <textarea id="required_skills" name="required_skills" rows="4">{{ activity.required_skills if activity else '' }}</textarea>
                <small class="form-text">List any skills or qualifications required for volunteers (optional)</small>
            </div>

            <div class="form-group">
                <label for="notes">Important Notes</label>
                <textarea id="notes" name="notes" rows="4">{{ activity.notes if activity else '' }}</textarea>
                <small class="form-text">Other important information for volunteers (optional)</small>
            </div>
        </div>

        <!-- <div class="form-section">
            <h2>Attachments</h2>
            <div class="form-group">
                <label for="images">Activity Images</label>
                <input type="file" id="images" name="images" accept="image/*" multiple>
                <small class="form-text">Upload multiple activity-related images (optional)</small>
            </div>

            <div class="form-group">
                <label for="documents">Related Documents</label>
                <input type="file" id="documents" name="documents" accept=".pdf,.doc,.docx">
                <small class="form-text">Upload activity-related documents (optional)</small>
            </div>
        </div> -->

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{% if activity %}Save Changes{% else %}Create Activity{% endif %}</button>
            <a href="{{ url_for('charity_dashboard') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<style>
.activity-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.form-header {
    margin-bottom: 2rem;
    text-align: center;
}

.activity-form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h2 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

.form-group input[type="file"] {
    width: 100%;
    padding: 0.5rem 0;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
    color: #666;
    font-size: 0.875rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .activity-form {
        padding: 1rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.activity-form');
    const startTimeInput = document.getElementById('start_time');
    const endTimeInput = document.getElementById('end_time');

    form.addEventListener('submit', function(e) {
        const startTime = new Date(startTimeInput.value);
        const endTime = new Date(endTimeInput.value);

        if (endTime <= startTime) {
            e.preventDefault();
            alert('End time must be later than start time!');
            return;
        }

        if (startTime < new Date()) {
            e.preventDefault();
            alert('Start time cannot be earlier than current time!');
            return;
        }
    });

    // Set minimum datetime value to current time
    const now = new Date();
    const nowString = now.toISOString().slice(0, 16);
    startTimeInput.min = nowString;
    endTimeInput.min = nowString;

    // Update end time minimum value when start time changes
    startTimeInput.addEventListener('change', function() {
        endTimeInput.min = this.value;
    });
});
</script>
{% endblock %} 